import Taro from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import {AtButton} from 'taro-ui'

import './index.less'

@connect(state => ({
  pca: state.pca,
}))
export default class Index extends Taro.Component {

  config = {
    navigationBarTitleText: '选择地区'
  }

  constructor() {
    super(...arguments)

    this.state = {
      cityList: [],
      areaList: [],
      selectedPcaNameList: [],
      selectedPcaNode: {},
    }
  }

  componentDidMount() {
    const {dispatch, pca: {cityList, areaList, selectedPcaNameList}} = this.props;

    dispatch({
      type: 'pca/getPca4Query',
    });

    this.setState({
      cityList,
      areaList,
      selectedPcaNameList,
    });
  }

  onOk = e => {
    e.stopPropagation();
    const {cityList, areaList, selectedPcaNode, selectedPcaNameList} = this.state;

    this.props.dispatch({
      type: 'pca/save',
      payload: {
        cityList,
        areaList,
        selectedPcaNameList,
        selectedPcaNode,
      },
    });

    Taro.navigateBack();
  };

  onSelect = (level, index, id, name) => {
    let tmpCityList = [];
    let tmpAreaList = [];
    let tmpSelectedPcaNameList = [];

    if (level === 1) {
      const {pca: {list}} = this.props;
      tmpCityList = list[index].children;
      tmpSelectedPcaNameList = [name];
    } else if (level === 2) {
      const {cityList, selectedPcaNameList} = this.state;
      tmpCityList = cityList;
      tmpAreaList = cityList[index].children;
      tmpSelectedPcaNameList = [selectedPcaNameList[0], name];
    } else if (level === 3) {
      const {cityList, areaList, selectedPcaNameList} = this.state;
      tmpCityList = cityList;
      tmpAreaList = areaList;
      tmpSelectedPcaNameList = [selectedPcaNameList[0], selectedPcaNameList[1], name];
    }

    this.setState({
      cityList: tmpCityList,
      areaList: tmpAreaList,
      selectedPcaNameList: tmpSelectedPcaNameList,
      selectedPcaNode: {
        id,
        name,
      },
    });
  };

  // 存在这种情况：进入该页面，未选择地区然后返回，再进入时，显示刚才选择的地区，而不是之前已选择的地区，思路：selectedPcaNameList在state保存一份
  render() {
    const {pca: {list}} = this.props;
    const {cityList, areaList, selectedPcaNameList} = this.state;
    const tmpSelectedPcaName = selectedPcaNameList.join(' / ');

    const province = (
      <View className="item-wrapper">
        {
          list.map((item, index) => (
            <View key={item.code} className={selectedPcaNameList[0] === item.name ? "item active" : "item"} onClick={this.onSelect.bind(this, 1, index, item.code, item.name)}>
              <Text>{item.name}</Text>
            </View>
          ))
        }
      </View>
    );

    const city = cityList.length ? (
      <View className="item-wrapper">
        {
          cityList.map((item, index) => (
            <View key={item.code} className={selectedPcaNameList[1] === item.name ? "item active" : "item"} onClick={this.onSelect.bind(this, 2, index, item.code, item.name)}>
              <Text>{item.name}</Text>
            </View>
          ))
        }
      </View>
    ) : <View className="item-wrapper"/>;

    const area = areaList.length ? (
      <View className="item-wrapper">
        {
          areaList.map((item, index) => (
            <View key={item.code} className={selectedPcaNameList[2] === item.name ? "item active" : "item"} onClick={this.onSelect.bind(this, 3, index, item.code, item.name)}>
              <Text>{item.name}</Text>
            </View>
          ))
        }
      </View>
    ) : <View className="item-wrapper"/>;

    return (
      <View className='container'>
        <View className='head'>
          <View className="text">当前选择：{tmpSelectedPcaName}</View>
          <AtButton customStyle={{color: '#fff', background: '#8A9DEA', border: 'none'}} type='primary' size='small' onClick={this.onOk.bind(this)}>确定</AtButton>
        </View>
        <View className="pca-wrapper">
          {province}
          {city}
          {/*{area}*/}
        </View>
      </View>
    )
  }
}
